/**
 * Copyright 2013 - Les petits mots
 */
 

/* Affichage du % dans la partie progression */
.ui-progressbar-value {
    line-height: 35px;
    vertical-align:middle;
    padding-left: 5px;
    text-shadow: -1px 0 #BBB, 0 1px #BBB, 1px 0 #BBB, 0 -1px #BBB;
}

/**
 * Les médailles
 */
.goldMedal {
	display:inline-block;
	background:url("../img/gold_medal.png") no-repeat;
	width:40px;
	height:40px;
	background-size:40px;
}

.silverMedal {
	display:inline-block;
	background:url("../img/silver_medal.png") no-repeat;
	width:40px;
	height:40px;
	background-size:40px;
}

.bronzeMedal {
	display:inline-block;
	background:url("../img/bronze_medal.png") no-repeat;
	width:40px;
	height:40px;
	background-size:40px;
}

/**
 * Jeu 1
 */
.imagesGame1 {
	max-width:100%;
	max-height:70%;
}

#game1 {
	text-align: center;
}

.dropLocation,.dragtable {
	margin-left: auto;
	margin-right: auto;
}

.dragtable tr td, .dropLocation tr td {
     width:40px;
   	 height:40px;
     font-size: 35px;
     color: #FFF;
     font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
     border-radius:10px;
	 font-weight: normal;
	 border-width: 2px;
	 border-style: solid;
}



/* Case vide dropable */
.empty.ui-droppable,.empty {
	background-color: #888;
	border-color:#666;
}

/* Element à droper */
.dragtable tr td {
	background-color: #3276B1;
	border-color: #155E9D;
}

/* Element OK */
.ui-droppable {
	background-color: #47A447;
	border-color: #398439;
}

.ui-state-active {
	background: none;
}

/**
 * Jeu 2
 */
#canvasGame2 {
	max-height:70%;
	max-width:100%;
	border: 1px solid black;
}

#game2 {
	text-align: center;
}

#numberHits, #timeSpentPuzzle, #numHitsRec, #displayFinalTime {
	display: none;
}

/*
 * List des mots
 */
 .itemImageList {
 	display:block;
 	margin: 0 auto;
 	max-width: 100%;
 	height: 50%;
 	max-height: 50%;
 }
 
 /**
  * Divers
  */
.no-border {
	border: 0 !important;
}

 .logo {
 	display:block;
 	margin: 0 auto 10% auto;
 	max-width: 100%;
 	height: 20%;
 	max-height: 20%;
 	
 }